<template>
    <div>
        <el-container class="hero-section">

            <el-row :gutter="20">
                <el-col :span="8" v-for="feature in features" :key="feature.title">
                    <el-card :body-style="{ padding: '20px' }">
                        <h3>{{ feature.title }}</h3>
                        <p>{{ feature.description }}</p>
                    </el-card>
                </el-col>
            </el-row>
            <el-header>
                <h1>欢迎来到农业云平台</h1>
                <p>创新科技，引领农业未来</p>
                
                
                <el-image :src="info" fit="fill" :lazy="true"></el-image>
                <br>
            </el-header>
        </el-container>
    </div>
</template>
<script>

export default {
    data() {
        return {
            info:'http://cdn.qiniu.liyansheng.top/img/20240811172859.png',
            features: [
                { title: '智能化管理', description: '通过先进的技术提升农业管理效率' },
                { title: '精准数据分析', description: '提供详尽的数据分析帮助决策' },
                { title: '高效资源配置', description: '优化资源配置，实现最大化收益' }
            ]
        };
    }
}
</script>
<style scoped>
.features-section {
    padding: 50px 20px;
    background-color: #f4f4f4;
}

.features-section h3 {
    margin-bottom: 20px;
}

.features-section p {
    color: #555;
}

.hero-section {
    /* background: url('your-hero-image-url.jpg') no-repeat center center; */
    background-size: cover;
    color: red;
    text-align: center;
    padding: 100px 0;
}

.hero-section h1 {
    font-size: 48px;
    margin-bottom: 20px;
}

.hero-section p {
    font-size: 24px;
    margin-bottom: 30px;
}
</style>